<!DOCTYPE html>
<html>
<head>
    <title>结算页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords"
          content="Flat Dark Web Login Form Responsive Templates, Iphone Widget Template, Smartphone login forms,Login form, Widget Template, Responsive Templates, a Ipad 404 Templates, Flat Responsive Templates"/>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="../js/jsencrypt.min.js"></script>
    <script src="../js/jquery.params.js"></script>
    <script src="../js/api.js"></script>
    <style type="text/css">
        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div>
    <h1>结算信息</h1>
    购物车id：
    <input type="text" id="cart_ids"/>
    <br/>
    商品id：
    <input type="text" id="goods_id"/>
    <br/>
    商品数量：
    <input type="text" id="goods_number"/>
    <br/>
    <button class="btn" onclick="getBalanceOrder()">获取结算信息</button>
    <div id="balance_info"></div>
</div>
<br/>
<hr/>
支付金额：<span id="payPrice"></span>
金额：<span id="price"></span>
<table class="gridtable">
    <tbody id="tbody1">
    </tbody>
</table>
<br/>
<hr/>
<div class="login-form">
    <div class="close"></div>
    <div class="signin">
        <button class="btn" onclick="order()">去支付</button>
    </div>
</div>
<div id="pay_f">

</div>
<script>

    $(function () {
        getData1();
    });

    function getData1() {
        var cart_id = $.query.get("cart_id");
        $("#cart_ids").val(cart_id);

        var goods_id = $.query.get("goods_id");
        var goods_number = $.query.get("goods_number");
        console.log(goods_id);
        console.log(goods_number);

        $("#goods_id").val(goods_id);
        $("#goods_number").val(goods_number);
    }

    function getBalanceOrder() {

        var json = {
            "cart_ids": $("#cart_ids").val(),
            "goods_id": $("#goods_id").val(),
            "goods_number": $("#goods_number").val()
        };

        var params = JSON.stringify(json).replace(/:/g,"=").replace(/"/g,"").replace(/ /g,"");
        var data = request("order_getBalanceOrder", "c64075fdaa954ccb8129a01a31060fa6", "10000", json, params);
        console.log(JSON.stringify(data));
        var dataList = data.list;

        $("#payPrice").html(data.payPrice);
        $("#price").html(data.price);

        var tableData = "<tr><th>用户ID</th>" +
            "<th>商品ID</th>" +
            "<th>商品名称</th>" +
            "<th>商品数量</th>" +
            "<th>商品价格</th></tr>";
        //动态增加5个td,并且把data数组的五个值赋给每个td
        for (var i = 0; i < dataList.length; i++) {
            tableData += "<tr>";
            tableData += "<td>" + dataList[i].userId + "</td>";
            tableData += "<td>" + dataList[i].goodsId + "</td>";
            tableData += "<td>" + dataList[i].goodsName + "</td>";
            tableData += "<td>" + dataList[i].goodsNumber + "</td>";
            tableData += "<td>" + dataList[i].goodsPrice + "</td>";
            tableData += "</tr>";
        }
        //现在tableData已经生成好了，把他赋值给上面的tbody
        console.log(tableData);
        document.getElementById("tbody1").innerHTML = tableData;
    }

    function order() {
        var json = {};
        var params = JSON.stringify(json).replace(/:/g,"=").replace(/"/g,"").replace(/ /g,"");
        var data = request("order_submitOrder", "c64075fdaa954ccb8129a01a31060fa6", "10000", json, params);
        //下单成功选择支付方式
        console.log(data);
        window.location.href = "http://localhost:9090/rest/views/alipay_order.html?order_info=" + encodeURI(JSON.stringify(data));
    }
</script>
</body>
</html>